<template>
 <Card :dis-hover="true">
    <base-table :data="data" :columns="columns" @add="addHandler" 
    @update="updateHandler" @check="checkHandler" @approve="approveHandler"
    @delete="deleteHandler" ck >
      <Select slot="select" v-model="currentSequence" style="width:200px" @on-change="selectChange">
        <Option v-for="item in sequences" :value="item.Id" :key="item.Id">{{ item.Name }}</Option>
      </Select>
    </base-table>
  </Card>
</template>

<script>
import moment from 'moment';
import BaseTable from '@c/table/table';
import { newApiParams } from '@/common/utils';
export default {
  name: 'ProjectList',
  components: {
    BaseTable
  },
  data () {
    return {
      currentSequence: '',
      currentSequenceName: '',
      sequences: [],
      data: [],
      columns: [
        { title: ' ', type: 'index', width: 50 },
        { title: '项目名称', key: 'Name', tooltip: true },
        { title: '项目编号', key: 'No', tooltip: true },
        { title: '学科', key: 'SubjectName', tooltip: true },
        { title: '项目进度', key: 'Type', tooltip: true },
        { title: '负责人', key: 'Creater' },
        // { title: '导师', key: 'TutorName' },
        { 
          title: '预算经费',
          key: 'Budget',
          render: (h, { row }) => {
            let budget = row.Budget ? row.Budget : 0;
            
            return h('span', {}, `￥${budget}`);
          }
        },
        { 
          title: '已使用经费',
          key: 'Used',
          render: (h, { row }) => {
            let used = row.Used ? row.Used : 0;
            
            return h('span', {}, `￥${used}`);
          }
        },
        
        { 
          title: '截止时间',
          width: 200,
          render: (h, { row }) => {
            let start = moment(row['Start']).isValid() ? moment(row['Start']).format('YYYY/MM/DD') : 'YYYY/MM/DD';
            let end = moment(row['End']).isValid() ? moment(row['End']).format('YYYY/MM/DD') : 'YYYY/MM/DD';
            return h('span', {}, `${start} 至 ${end}`);
          }
        }
      ],
      levelArray: [
        {
          key: '全国',
          value: 0
        },
        {
          key: '省级',
          value: 1
        },
        {
          key: '市级',
          value: 2
        }
      ],
      sourceArray: [
        {
          key: '科研',
          value: 0
        },
        {
          key: '其它',
          value: 1
        }
      ],
      chacterArray: [
        {
          key: '软件工程',
          value: 0
        },
        {
          key: '其它',
          value: 1
        }
      ]
    };
  },
  methods: {
    selectChange () {
      this.getAll();
      for (let k = 0; k < this.sequences.length; k++) {
        console.log(this.sequences[k]);
        if (this.sequences[k].Id === this.currentSequence) {
          this.currentSequenceName = this.sequences[k].Name;
          return;
        }
      }
    },
    GetSequences () {
      this.$api.GetSequences().then(res => {
        // console.log(res.Data);
        this.sequences = res.Data;
        if (Array.isArray(this.sequences) && this.sequences.length > 0) {
          this.currentSequence = this.sequences[0].Id;
          this.currentSequenceName = this.sequences[0].Name;
          // this.getProject(this.sequences[0].Id);
          this.getAll();
        } else {
          this.$Message.warning('数据异常！');
        }
      }, err => {
        if (err) {
          console.debug(err);
        }
      });
    },
    addHandler () {},
    updateHandler () {},
    checkHandler (rows) {
      if (Array.isArray(rows) && rows.length === 1) {
        rows[0].Content = '';
        delete rows[0].Type;
        this.$router.push({ name: '预算清单', params: { project: rows[0], editorable: false, type: 1 } });
      } else {
        this.$Message.warning('请选择一条数据操作！');
      }
    },
    approveHandler () {},
    deleteHandler () {},
    getAll () {
      this.$api.QueryLegeProject(this.currentSequence).then((res) => {
        console.log(res.Data);
        if (Array.isArray(res.Data) && res.Data.length > 0) {
          this.data = res.Data;
        } else {
          this.data = [];
        }
      }).catch((err) => {
        if (err) {
          this.$Message.error(err);
        }
      });
    }
  },
  mounted () {
    // this.getAll();
    this.GetSequences();
  }
};
</script>

<style scoped>

</style>